<template>
    <view class="my-upload-image">
        <u-upload :fileList="localValue" @afterRead="afterRead" @delete="deletePic" name="1" multiple
            :maxCount="maxCount"></u-upload>
    </view>
</template>

<script>
    import {
        getConn,
    } from "@/store/user.js";
    
    export default {
        name: 'ImageUpload',
        props: {
            value: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            maxCount: {
                type: Number,
                default: 5
            }
        },
        data() {
            return {
                baseUrl: '',
                localValue: [],
            }
        },
        methods: {
            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this.localValue.length;
                lists.map((item) => {
                    this.localValue.push({
                        ...item,
                        status: 'uploading', // uploading
                        message: '上传中' // 上传中
                    })
                })
                // 远程上传部分
                for (let i = 0; i < lists.length; i++) {
                    let result = await this.uploadFilePromise(lists[i].url);
                    let item = this.localValue[fileListLen]
                    this.localValue.splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '上传完成',
                        url: result.previewPath
                    }))
                    fileListLen++
                }
                this.$emit('input', this.localValue.map(item => {
                    return {
                        previewPath: item.url
                    }
                }));
            },
            uploadFilePromise(url) {
                return new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: this.baseUrl + '/fileServer/upload',
                        filePath: url,
                        name: 'file',
                        header: {
                            'Accept': '*/*',
                            'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6'
                        },
                        formData: {
                            dir: ''
                        },
                        success: (res) => {
                            const data = JSON.parse(res.data);
                            if (data.code === 200)
                                resolve(data.data);
                        }
                    });
                })
            },
            deletePic(event) {
                this.localValue.splice(event.index, 1)
            },
        },
        mounted(){
            // #ifdef H5
            // 如需跨域参照以下h5跨域配置
            this.baseUrl = "/api"
            // #endif
            
            // #ifdef APP-PLUS
            this.baseUrl = getConn().mes;
            // #endif
        }
    };
</script>

<style lang="scss" scoped>
    .my-upload-image {}
</style>